<template>
  <div class="standard-page">
    <div>
      <van-nav-bar
        left-text="家政服务标准"
        left-arrow
        @click-left="$router.back()"
        class="navBar"
      />
      <van-card class="content">
        <template #tags>
          <!-- 这里也可以考虑用单元格 -->
          <van-row class="head">
            <i class="iconfont jiazhengshuxian"></i>
            <span class="title">服务标准</span>
          </van-row>
          <van-row class="middle" type="flex" justify="space-between">
            <van-col span="20"> 服务区域：</van-col>
            <van-col span="4">
              <!-- 下拉菜单 -->
              <div class="option">
                <select>
                  <option v-for="(item, index) in dropdownlist" :key="index">{{
                    item
                  }}</option>
                </select>
              </div>
            </van-col>
          </van-row>
          <van-row class="footer">
            <p>服务类型：</p>
            <van-row class="skill">
              <van-tag
                plain
                class="skill-item"
                v-for="(item, index) in jobinfos"
                :key="index"
                @click="post(item)"
              >
                {{ item }}
              </van-tag>
            </van-row>
          </van-row>

          <van-row class="star">
            <p>星级标准：</p>
            <van-row class="skill">
              <van-tag
                plain
                class="skill-item"
                v-for="(item, index) in star"
                :key="index"
                @click="post(item)"
                >{{ item }}</van-tag
              >
            </van-row>
          </van-row>
        </template>
      </van-card>
    </div>

    <van-card v-show="companyshow">
      <template #tags>
        <div class="companyshow">
          <div
            class="cominfomation"
            v-for="(item, index) in jobinfo"
            :key="index"
          >
            <van-cell-group class="cominfomations">
              <van-cell>
                <div>
                  <van-row type="flex" style="height:100%">
                    <van-col span="7" style="height:80px">
                      <img
                        @click="$router.push(`/Herdetails/?id=${item.id}`)"
                        class="peoimg"
                        :src="item.photo"
                        alt=""
                      />
                    </van-col>
                    <van-col span="17">
                      <div class="rightinfo">
                        <van-row type="flex">
                          <van-col span="12">
                            <span class="rightname">{{ item.name }}</span>
                          </van-col>
                          <van-col span="12" style="text-align:right">
                            <span class="peowage">{{ item.salary }}</span>
                          </van-col>
                        </van-row>

                        <van-row type="flex">
                          <van-col
                            v-for="(option, index) in item.grade"
                            :key="index"
                            span="7"
                          >
                            <div class="rightopt">
                              <span>{{ option }}</span>
                            </div>
                          </van-col>
                        </van-row>
                      </div>
                    </van-col>
                  </van-row>
                  <van-row type="flex" justify="center">
                    <van-col>
                      <span class="peoinfos">{{ item.information }}</span>
                    </van-col>
                  </van-row>
                </div>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
      </template>
    </van-card>
    <van-button class="bottombtn" type="primary" size="large" @click="btnok"
      >家政服务查询</van-button
    >
  </div>
</template>

<script>
import { getjob, getpeople } from "@/api/user";
export default {
  name: "StandardPage",

  data() {
    return {
      dropdownlist: ["长沙", "广州", "深圳", "北京", "上海", "杭州"],
      jobinfos: [],
      jobinfo: [], //存放查询家政人员数据
      star: ["一星", "二星", "三星", "四星", "五星", "金星"],
      companyshow: false,
      personnel: "" //点击获取到的数据
    };
  },
  created() {
    this.getjob();
  },
  mounted() {},
  methods: {
    async getjob() {
      const { data } = await getjob();
      this.jobinfos = data[0].Mainbusiness;
      console.log(this.jobinfos);
    },
    post(val) {
      this.personnel = val;
      console.log(this.personnel);
    },
    async getpeople(val) {
      const { data } = await getpeople();
      this.jobinfo = data.filter(
        item =>
          item.Mainbusiness.indexOf(val) !== -1 ||
          item.grades.indexOf(val) !== -1
      );
      console.log(this.jobinfo);
    },
    btnok() {
      this.getpeople(this.personnel);
      this.companyshow = true;
    }
  }
};
</script>

<style scoped lang="scss">
.standard-page {
  position: relative;
  font-size: 28px;
  height: 100%;
  .navBar {
    background-color: #3f51b5 !important;
    height: 180px;
    ::v-deep .van-nav-bar__text {
      font-size: 32px;
      color: #fff;
      font-weight: 800;
    }
    ::v-deep .van-nav-bar__arrow {
      font-size: 36px;
      color: #fff;
      font-weight: 800;
    }
    ::v-deep .van-nav-bar__left {
      margin-top: 40px;
      padding-left: 26px;
    }
  }
  .content {
    padding: 0px;
    display: block;
    width: 674px;
    height: 750px;
    position: absolute;
    top: 120px;
    left: 40px;
    z-index: 1;
    border-radius: 8px;
    background-color: #fff;

    .head {
      height: 110px;
      line-height: 110px;
      border-bottom: 2px solid #f0eeee;
    }

    .middle {
      margin: 0px 36px;
      height: 96px;
      line-height: 96px;
      border-bottom: 2px solid #f0eeee;
    }

    .footer {
      height: 262px;
      margin: 0px 36px;
      border-bottom: 2px solid #f0eeee;
    }
    .star {
      margin: 0px 36px;
    }
    .skill {
      font-size: 20px;

      .skill-item {
        height: 46px;
        padding: 0px 20px;
        margin: 10px;
        border-radius: 23px;
        &:hover {
          color: rgba(63, 81, 181, 100);
        }
      }
    }
  }
  select {
    border: 0px;
    outline: none;
    font-size: 28px;
  }
  option {
    border: none;
  }

  .jiazhengshuxian {
    font-size: 28px;
    color: #3f51b5;
    padding-left: 36px;
  }
  .jiazhengxiala {
    font-size: 28px;
  }
  .bottombtn {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(63, 81, 181, 100);
    font-size: 28px;
  }
  .companyshow {
    margin-top: 800px;
    height: 100%;
    .van-icon-smile-o,
    .van-icon-friends-o {
      vertical-align: text-bottom;
      margin-right: 9px; //0.5625
    }
    .cominfomation {
      height: 285px;
      .cominfomations {
        height: 100%;
        position: relative;
        .van-cell {
          height: 100%;

          img {
            width: 144px;
            height: 130px;
            margin-top: 15px;
          }
          .peoimg {
            margin: 5px 0 0 10px;
            height: 150px;
          }
          .rightinfo {
            .rightname {
              font-family: PingFangSC-regular;
              color: rgb(0, 0, 0);
              font-size: 14px;
            }
            .righteva {
              color: rgba(151, 145, 145, 100);
              font-size: 12px;
              font-family: PingFangSC-regular;
            }

            .rightopt {
              width: 100%;
              height: 40px;
              color: rgba(63, 81, 181, 100);
              font-size: 10px;
              font-family: PingFangSC-regular;
              border-radius: 18px 18px 18px 18px;
              border: 1px solid rgba(63, 81, 181, 100);
              text-align: center;
              margin-top: 10px;

              span {
                margin-bottom: 5px;
              }
            }

            .peowage {
              color: rgba(151, 145, 145, 100);
              font-family: PingFangSC-bold;
              font-size: 13px;
            }
          }
          .peoinfos {
            color: rgba(151, 145, 145, 100);
            font-size: 12px;
            font-family: PingFangSC-regular;
            position: absolute;
            bottom: 80px;
            left: 200px;
          }
          .comicon {
            .van-icon {
              vertical-align: middle;
              margin-right: 7px;
            }
            .distance {
              margin-right: 17px;
              color: rgba(16, 16, 16, 100);
              font-family: PingFangSC-regular;
              font-size: 12px;
            }
            .adress {
              color: rgba(151, 145, 145, 100);
              font-size: 12px;
              font-family: PingFangSC-regular;
            }
          }
        }
      }
    }
    .more {
      margin: 0 auto;
      color: rgba(123, 119, 119, 100);
      font-size: 12px;
    }
  }
}
</style>
